<template>
  <f7-page>
    <f7-navbar :title="$t('m.be1')" back-link=" "></f7-navbar>
    <div class="content-padding">
      <custom-input type="email" :placeholder="$t('m.be2')" v-model="formItems.email"></custom-input>
      <custom-input type="password" :placeholder="$t('m.be3')" v-model="formItems.pwd"></custom-input>
      <f7-button fill color="blue" large @click="handleBinding">{{$t('m.be4')}}</f7-button>
    </div>
  </f7-page>
</template>

<script>
  import { updateEmail } from "../api/my";

  export default {
    name: "bind-email",
    data() {
      return {
        formItems: {
          email: '',
          pwd: ''
        }
      }
    },
    methods: {
      handleBinding() {
        updateEmail(this.formItems).then(()=>this.$f7router.back())
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-padding {
    margin-top: $padding20;
    .custom-input {
      margin-bottom: $padding20;
    }
  }
</style>
